<?php
require_once __DIR__ . '/fun.ajax.php';
?>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $conf['title'] ?> - 便捷上网入口</title>
    <!-- 异步加载 Font Awesome，不阻塞页面渲染 -->
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    </noscript>
    <style>
        :root {
            --primary-text-color: #333333;
            /* 深灰色，接近黑色 */
            --secondary-text-color: #555555;
            /* 中度灰色 */
            --accent-color: #007bff;
            --accent-color-hover: #0056b3;
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --card-bg-color: rgba(255, 255, 255, 0.7);
            --card-bg-color-hover: rgba(255, 255, 255, 0.9);
            --card-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            --card-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.15);
            --card-radius: 12px;
            --blur-intensity: 8px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: var(--font-sans);
        }

        body {
            line-height: 1.6;
            background-repeat: no-repeat;
            background-position: center top;
            background-size: cover;
            background-attachment: fixed;
            min-height: 100vh;
            color: var(--primary-text-color);
        }

        /* 手机端背景（宽度≤768px） - 延迟加载 */
        @media (max-width: 768px) {
            body {
                background-color: #f0f0f0;
                /* 添加占位背景色 */
                background-size: 100% auto;
                background-position: center top;
                background-attachment: scroll;
                /* 手机端使用scroll避免iOS兼容性问题 */
            }

            body.bg-loaded {
                background-image: url('<?php echo htmlspecialchars($conf['bg_mobile_url'] ?? 'https://lh.ithxs.com/apis.php?act=pe'); ?>');
            }

            body::before {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                background-color: #f0f0f0;
                /* 添加占位背景色 */
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                z-index: -1;
                /* 创建固定背景层 */
            }

            body.bg-loaded::before {
                background-image: url('<?php echo htmlspecialchars($conf['bg_mobile_url'] ?? 'https://lh.ithxs.com/apis.php?act=pe'); ?>');
            }
        }

        /* 电脑端背景（宽度＞768px） - 延迟加载 */
        @media (min-width: 769px) {
            body {
                background-color: #f0f0f0;
                /* 添加占位背景色 */
                background-size: cover;
                background-position: center;
            }

            body.bg-loaded {
                background-image: url('<?php echo htmlspecialchars($conf['bg_pc_url'] ?? 'https://lh.ithxs.com/apis.php?act=pc'); ?>');
            }
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px 15px;
            position: relative;
            min-height: calc(100vh - 120px);
            padding-bottom: 120px;
            /* 为固定页脚预留更多空间 */
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px 10px;
            /* 磨砂玻璃背景效果 */
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            /* border: 1px solid rgba(255, 255, 255, 0.5); */
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .header h1 {
            color: #1a1a1a;
            /* 旧颜色，可考虑替换为 var(--primary-text-color) 或更深的颜色 */
            font-size: 2.2rem;
            /* 略微增大标题 */
            margin-bottom: 10px;
            font-weight: 700;
            /* 加粗 */
        }

        .header .site-desc {
            color: var(--secondary-text-color);
            font-size: 1rem;
            max-width: 800px;
            margin: 0 auto;
            font-weight: 400;
        }

        .links-grid {
            display: grid;
            grid-template-columns: repeat(<?php echo intval($conf['pc_columns'] ?? 5); ?>, 1fr);
            gap: 25px;
            /* 增大卡片间距 */
            padding: 0 10px;
        }

        .link-card {
            background: var(--card-bg-color);
            backdrop-filter: blur(12px);
            /* 增加模糊度 */
            -webkit-backdrop-filter: blur(12px);
            border-radius: var(--card-radius);
            box-shadow: var(--card-shadow);
            padding: 20px;
            /* 增大内边距 */
            text-decoration: none;
            color: var(--primary-text-color);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            /* 更平滑的过渡动画 */
            display: flex;
            flex-direction: column;
            /* align-items: center; */
            /* 取消全局居中 */
            gap: 10px;
            /* 调整元素间距 */
            position: relative;
            /* 为绝对定位的子元素提供参照 */
            min-height: 150px;
            /* 设定一个最小高度，防止内容过少时塌陷 */
        }

        .link-card:hover {
            transform: translateY(-4px);
            /* 悬停时上移更多 */
            background: var(--card-bg-color-hover);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
            /* 悬停时阴影更明显 */
            /* border: 1px solid rgba(255, 255, 255, 0.6); */
            /* 考虑移除或调整边框 */
        }

        .link-icon-container {
            position: absolute;
            top: 20px;
            /* 调整位置 */
            left: 20px;
            /* 调整位置 */
        }

        .link-icon {
            font-size: 1.7rem;
            /* 略微调整图标大小 */
            color: var(--accent-color);
        }

        .link-icon-img {
            border-radius: 6px;
            /* 调整图片圆角 */
        }

        .link-name {
            font-size: 1.05rem;
            /* 略微增大标题 */
            font-weight: 600;
            color: var(--primary-text-color);
            position: absolute;
            top: 20px;
            /* 调整位置 */
            right: 20px;
            /* 调整位置 */
            text-align: right;
            max-width: calc(100% - 70px);
            /* 调整最大宽度 */
        }

        .link-description {
            font-size: 0.9rem;
            /* 增大描述字体 */
            color: var(--secondary-text-color);
            text-align: left;
            margin-top: 60px;
            /* 调整与顶部元素的间距 */
            width: 100%;
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 超出部分显示省略号 */
            display: -webkit-box;
            /*  实现多行省略 */
            -webkit-line-clamp: 2;
            line-clamp: 2;
            /*  限制在两行 */
            -webkit-box-orient: vertical;
            min-height: 2.5em;
            /* 预留至少两行的高度，避免单行时跳动 */
        }

        .link-stats {
            font-size: 0.8rem;
            color: var(--secondary-text-color);
            font-weight: 500;
            margin-top: auto;
            /* 将统计信息推到底部 */
            padding-top: 10px;
            /* 增加与上方元素的间距 */
        }

        .visit-btn {
            background: var(--accent-color);
            color: white;
            padding: 8px 18px;
            /* 调整内边距 */
            border-radius: var(--card-radius);
            font-size: 0.9rem;
            font-weight: 500;
            /* 调整字重 */
            transition: background 0.25s ease;
            display: inline-flex;
            /* 修复父容器为inline元素时的布局问题 */
            align-items: center;
            justify-content: center;
            height: 34px;
            /* 固定高度确保垂直对齐 */
            min-width: 80px;
            /* 最小宽度避免内容挤压 */
            vertical-align: middle;
            /* 修复行内元素对齐 */
        }

        .visit-btn:hover {
            background: var(--accent-color-hover);
            transform: scale(1.03);
            /* 轻微放大效果 */
        }

        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 15px 10px;
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            /* border-top: 1px solid rgba(255, 255, 255, 0.5); */
            text-align: center;
            font-size: 0.85rem;
            color: #2d3436;
            font-weight: 500;
            box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            /* 确保页脚在最上层 */
        }

        /* ============ 磨砂玻璃通知弹窗样式 ============ */
        .glass-notification {
            position: fixed;
            width: 380px;
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
                0 2px 8px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.6);
            overflow: hidden;
            z-index: 99999;
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        /* 右下角（默认） */
        .glass-notification.position-bottom-right {
            bottom: 30px;
            right: 30px;
        }

        .glass-notification.position-bottom-right:not(.show) {
            transform: translateX(450px);
        }

        .glass-notification.position-bottom-right.show {
            opacity: 1;
        }

        .glass-notification.position-bottom-right.hide {
            transform: translateX(450px) !important;
            opacity: 0;
        }

        /* 左下角 */
        .glass-notification.position-bottom-left {
            bottom: 30px;
            left: 30px;
        }

        .glass-notification.position-bottom-left:not(.show) {
            transform: translateX(-450px);
        }

        .glass-notification.position-bottom-left.show {
            opacity: 1;
        }

        .glass-notification.position-bottom-left.hide {
            transform: translateX(-450px) !important;
            opacity: 0;
        }

        /* 右上角 */
        .glass-notification.position-top-right {
            top: 30px;
            right: 30px;
        }

        .glass-notification.position-top-right:not(.show) {
            transform: translateX(450px);
        }

        .glass-notification.position-top-right.show {
            opacity: 1;
        }

        .glass-notification.position-top-right.hide {
            transform: translateX(450px) !important;
            opacity: 0;
        }

        /* 左上角 */
        .glass-notification.position-top-left {
            top: 30px;
            left: 30px;
        }

        .glass-notification.position-top-left:not(.show) {
            transform: translateX(-450px);
        }

        .glass-notification.position-top-left.show {
            opacity: 1;
        }

        .glass-notification.position-top-left.hide {
            transform: translateX(-450px) !important;
            opacity: 0;
        }

        .glass-notification-progress {
            position: absolute;
            top: 0;
            left: 0;
            height: 4px;
            background: linear-gradient(90deg, #4e7cff 0%, #6b94ff 100%);
            width: 100%;
            transform-origin: left;
            transition: transform linear;
            box-shadow: 0 2px 8px rgba(78, 124, 255, 0.4);
        }

        .glass-notification-content {
            padding: 24px;
            padding-top: 28px;
            padding-right: 50px;
        }

        .glass-notification-text {
            font-size: 15px;
            color: #2c3e50;
            line-height: 1.6;
            margin-bottom: 16px;
            font-weight: 500;
            word-wrap: break-word;
            word-break: break-word;
        }

        .glass-notification-btn-wrapper {
            text-align: right;
        }

        .glass-notification-btn {
            display: inline-block;
            padding: 10px 24px;
            background: linear-gradient(135deg, #4e7cff 0%, #6b94ff 100%);
            color: white;
            border-radius: 10px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(78, 124, 255, 0.3);
            border: none;
            cursor: pointer;
        }

        .glass-notification-btn:hover {
            background: linear-gradient(135deg, #3d6bef 0%, #5a83ef 100%);
            box-shadow: 0 6px 16px rgba(78, 124, 255, 0.4);
            transform: translateY(-2px);
        }

        .glass-notification-btn:active {
            transform: translateY(0);
        }

        .glass-notification-close {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.05);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            color: #8492a6;
            font-size: 16px;
        }

        .glass-notification-close:hover {
            background: rgba(0, 0, 0, 0.1);
            color: #2c3e50;
            transform: rotate(90deg);
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .glass-notification {
                width: 50%;
                max-width: 280px;
                min-width: 200px;
                border-radius: 12px;
            }

            .glass-notification.position-bottom-right {
                bottom: 16px;
                right: 16px;
            }

            .glass-notification.position-bottom-left {
                bottom: 16px;
                left: 16px;
            }

            .glass-notification.position-top-right {
                top: 16px;
                right: 16px;
            }

            .glass-notification.position-top-left {
                top: 16px;
                left: 16px;
            }

            .glass-notification-content {
                padding: 14px;
                padding-top: 18px;
                padding-right: 40px;
            }

            .glass-notification-text {
                font-size: 12px;
                margin-bottom: 10px;
                line-height: 1.5;
            }

            .glass-notification-btn {
                padding: 7px 16px;
                font-size: 12px;
                border-radius: 8px;
            }

            .glass-notification-close {
                top: 8px;
                right: 8px;
                width: 22px;
                height: 22px;
                font-size: 14px;
            }
        }

        /* 移动端优化 */
        @media (max-width: 768px) {
            .container {
                padding: 15px 12px 120px;
                /* 为固定页脚调整底部内边距 */
                min-height: calc(100vh - 100px);
            }

            .header {
                margin-bottom: 25px;
                padding: 18px 16px;
                border-radius: 10px;
            }

            .header h1 {
                font-size: 1.8rem;
                margin-bottom: 8px;
                font-weight: 700;
            }

            .header .site-desc {
                font-size: 0.95rem;
                line-height: 1.5;
            }

            .links-grid {
                grid-template-columns: repeat(<?php echo intval($conf['mobile_columns'] ?? 2); ?>, 1fr);
                gap: 16px;
                padding: 0 4px;
            }

            .link-card {
                padding: 16px;
                min-height: 140px;
                border-radius: 10px;
                transition: all 0.25s ease;
            }

            .link-card:hover {
                transform: translateY(-2px);
            }

            .link-icon-container {
                top: 16px;
                left: 16px;
            }

            .link-icon {
                font-size: 1.5rem;
            }

            .link-icon-img {
                width: 28px;
                height: 28px;
            }

            .link-name {
                font-size: 1rem;
                font-weight: 600;
                top: 16px;
                right: 16px;
                max-width: calc(100% - 60px);
                line-height: 1.3;
            }

            .link-description {
                font-size: 0.85rem;
                margin-top: 50px;
                line-height: 1.4;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                min-height: 2.4em;
            }

            .link-stats {
                font-size: 0.8rem;
                margin-top: 8px;
            }

            .visit-btn {
                padding: 6px 14px;
                font-size: 0.85rem;
                border-radius: 8px;
                height: 32px;
                min-width: 75px;
            }

            .footer {
                font-size: 0.75rem;
                padding: 10px 12px;
                line-height: 1.4;
            }

            .footer p {
                margin: 2px 0;
            }
        }

        /* 小屏手机优化 (≤480px) */
        @media (max-width: 480px) {
            .container {
                padding: 12px 8px 110px;
            }

            .header {
                padding: 15px 12px;
                margin-bottom: 20px;
            }

            .header h1 {
                font-size: 1.6rem;
            }

            .header .site-desc {
                font-size: 0.9rem;
            }

            .links-grid {
                grid-template-columns: repeat(<?php echo intval($conf['mobile_columns'] ?? 2); ?>, 1fr);
                gap: 12px;
                padding: 0 2px;
            }

            .link-card {
                padding: 14px;
                min-height: 130px;
                border-radius: 8px;
            }

            .link-icon-container {
                top: 14px;
                left: 14px;
            }

            .link-icon {
                font-size: 1.4rem;
            }

            .link-icon-img {
                width: 26px;
                height: 26px;
            }

            .link-name {
                font-size: 0.95rem;
                top: 14px;
                right: 14px;
                max-width: calc(100% - 55px);
            }

            .link-description {
                font-size: 0.8rem;
                margin-top: 45px;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                min-height: 2.2em;
            }

            .visit-btn {
                padding: 5px 12px;
                font-size: 0.8rem;
                height: 30px;
                min-width: 70px;
            }

            .footer {
                font-size: 0.7rem;
                padding: 8px 10px;
            }
        }

        /* 弹窗样式 */
        .site-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            transition: opacity 0.3s ease-out;
            opacity: 1;
        }

        .modal-content {
            position: relative;
            max-width: 520px;
            width: 90%;
            max-height: 80vh;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 10;
            will-change: transform, opacity;
        }

        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        .modal-site-info {
            display: flex;
            align-items: center;
            gap: 16px;
            flex: 1;
        }

        .modal-title-container {
            flex: 1;
            min-width: 0;
        }

        .modal-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--primary-text-color);
            margin: 0;
            margin-bottom: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .modal-url {
            font-size: 0.9rem;
            color: var(--secondary-text-color);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: block;
        }

        .modal-close {
            width: 40px;
            height: 40px;
            border: none;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--secondary-text-color);
            transition: all 0.2s ease;
            font-size: 1.2rem;
        }

        .modal-close:hover {
            background: rgba(0, 0, 0, 0.1);
            color: var(--primary-text-color);
        }

        .modal-body {
            padding: 20px 24px;
            overflow-y: auto;
            max-height: 50vh;
        }

        .modal-description {
            font-size: 1rem;
            line-height: 1.6;
            color: var(--primary-text-color);
            margin-bottom: 20px;
            white-space: pre-wrap;
        }

        .modal-stats {
            padding: 16px;
            background: rgba(0, 0, 0, 0.03);
            border-radius: 8px;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.95rem;
            color: var(--secondary-text-color);
        }

        .stat-item i {
            color: var(--accent-color);
        }

        .modal-footer {
            padding: 16px 24px 20px;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .modal-visit-btn {
            background: linear-gradient(135deg, var(--accent-color), var(--accent-color-hover));
            color: white;
            padding: 12px 32px;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3);
        }

        .modal-visit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 123, 255, 0.4);
            background: linear-gradient(135deg, var(--accent-color-hover), #003d82);
        }

        .modal-visit-btn:active {
            transform: translateY(0);
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* 移除旧的动画，改用JavaScript动态控制 */

        /* 手机端弹窗样式调整 */
        @media (max-width: 768px) {
            .modal-content {
                width: 95%;
                max-width: none;
                margin: 20px 10px;
                max-height: 85vh;
            }

            .modal-header {
                padding: 16px 20px;
            }

            .modal-title {
                font-size: 1.2rem;
            }

            .modal-body {
                padding: 16px 20px;
                max-height: 45vh;
            }

            .modal-footer {
                padding: 12px 20px 16px;
            }

            .modal-visit-btn {
                padding: 10px 28px;
                font-size: 0.95rem;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <h1><?= $conf['title'] ?></h1>
            <p class="site-desc"><?= $conf['docs'] ?></p>
        </div>

        <div class="links-grid" id="linksContainer">
            <?php

            // 遍历并显示所有链接
            foreach ($Data as $link) {
                $title = htmlspecialchars($link['title'] ?? '未知网站');
                $description = htmlspecialchars($link['description'] ?? '');
                $url = htmlspecialchars($link['url'] ?? '#');
                // 检查icon是否为有效图标，如果无效则设置默认图标并标记需要自动获取
                $originalIcon = $link['icon'] ?? '';
                // 判断是否为有效图标：空值、单个字符、或不包含常见图标格式的字符串
                $isValidIcon = !empty($originalIcon) &&
                    (strlen($originalIcon) > 2) &&
                    (strpos($originalIcon, 'http') === 0 ||
                        strpos($originalIcon, 'fa') !== false ||
                        strpos($originalIcon, 'icon') !== false ||
                        strpos($originalIcon, '.') !== false);
                $icon = $isValidIcon ? htmlspecialchars($originalIcon) : 'fas fa-globe';
                $needAutoIcon = !$isValidIcon; // 标记是否需要自动获取图标
                $clicks = intval($link['clicks'] ?? 0);

                // 构建通过click.php的跳转链接
                $clickUrl = 'click.php?url=' . urlencode($url);

                echo '<div class="link-card" data-url="' . $url . '" data-title="' . $title . '" data-description="' . $description . '" data-clicks="' . $clicks . '" data-auto-icon="' . ($needAutoIcon ? '1' : '0') . '" data-click-url="' . $clickUrl . '" onclick="showSiteModal(this)" style="cursor: pointer;">';
                // 将图标和标题包裹在一个div中，以便更好地控制它们的布局
                echo '<div class="link-card-header">';
                echo '  <div class="link-icon-container">';
                // 判断图标类型：如果是URL则显示图片，否则显示字体图标
                $isIconUrl = $isValidIcon && (strpos($originalIcon, 'http') === 0 || strpos($originalIcon, '.') !== false);
                if ($isIconUrl) {
                    // 自定义图标URL，直接显示图片
                    echo '    <img class="link-icon-img" src="' . $icon . '" alt="" style="display: inline-block; width: 32px; height: 32px; object-fit: contain;">';
                    echo '    <i class="fas fa-globe link-icon" style="display: none;"></i>';
                } else {
                    // 字体图标或需要自动获取的图标
                    echo '    <img class="link-icon-img" src="" alt="" style="display: none; width: 32px; height: 32px; object-fit: contain;">';
                    echo '    <i class="' . $icon . ' link-icon" style="display: inline-block;"></i>';
                }
                echo '  </div>';
                echo '  <div class="link-name">' . $title . '</div>';
                echo '</div>'; // 关闭 link-card-header
                echo '<div class="link-description">' . $description . '</div>';
                // 将"点击次数："替换为眼睛图标
                echo '<div class="link-stats"><i class="fas fa-eye"></i> <span class="count">' . $clicks . '</span></div>';
                echo '<div class="visit-btn">点击前往</div>';
                echo '</div>';
            }
            ?>
        </div>
    </div>

    <!-- 网站介绍弹窗 -->
    <div id="siteModal" class="site-modal" style="display: none;">
        <div class="modal-overlay"></div>
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-site-info">
                    <div class="modal-icon-container">
                        <img class="modal-icon-img" src="" alt=""
                            style="display: none; width: 48px; height: 48px; object-fit: contain; border-radius: 8px;">
                        <i class="fas fa-globe modal-icon"
                            style="display: inline-block; font-size: 2.5rem; color: var(--accent-color);"></i>
                    </div>
                    <div class="modal-title-container">
                        <h3 class="modal-title"></h3>
                        <span class="modal-url"></span>
                    </div>
                </div>
                <button class="modal-close" onclick="closeSiteModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-description"></div>
                <div class="modal-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>访问次数：<span class="modal-clicks">0</span></span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="modal-visit-btn" onclick="visitSite()">
                    <i class="fas fa-external-link-alt"></i>
                    立即前往
                </button>
            </div>
        </div>
    </div>

    <!-- 新增底部备案信息 -->
    <div class="footer">
        <?php
        // 获取访问统计数据
        $visitStats = getVisitStats();
        ?>
        <p>今日访问：<?= $visitStats['today_visits'] ?> 次 | 今日IP：<?= $visitStats['today_unique'] ?> 个 | 总访问：<?= $visitStats['total_visits'] ?> 次 | 总IP：<?= $visitStats['total_unique'] ?> 个</p>
        <p>备案号：<?= htmlspecialchars($conf['icp'] ?? '未设置') ?> | 联系方式：<?= htmlspecialchars($conf['email'] ?? '未设置') ?></p>
        <p>网站已运行：<span id="site-runtime"></span></p>
        <p>Copyright © 2023-2025 <?= htmlspecialchars($conf['title'] ?? '导航网') ?> 保留所有权利</p>
    </div>

    <script>
        // ============ 性能优化：异步加载背景图片 ============
        (function() {
            // 页面加载完成后再加载背景图片
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', loadBackgroundImage);
            } else {
                // DOM已经加载完成，延迟一点再加载背景
                setTimeout(loadBackgroundImage, 100);
            }

            function loadBackgroundImage() {
                const isMobile = window.innerWidth <= 768;
                const bgUrl = isMobile ?
                    '<?php echo htmlspecialchars($conf['bg_mobile_url'] ?? 'https://lh.ithxs.com/apis.php?act=pe'); ?>' :
                    '<?php echo htmlspecialchars($conf['bg_pc_url'] ?? 'https://lh.ithxs.com/apis.php?act=pc'); ?>';

                // 预加载背景图片
                const img = new Image();
                img.onload = function() {
                    // 图片加载完成后才添加bg-loaded类
                    document.body.classList.add('bg-loaded');
                    console.log('背景图片加载完成');
                };
                img.onerror = function() {
                    console.warn('背景图片加载失败，使用默认背景色');
                };
                // 异步加载
                img.src = bgUrl;
            }
        })();
        // ============ 背景图片异步加载结束 ============

        // 弹窗管理变量
        let currentSiteData = null;
        let currentCardRect = null; // 保存卡片位置信息

        /**
         * 显示网站介绍弹窗
         * @param {HTMLElement} cardElement - 被点击的链接卡片元素
         */
        function showSiteModal(cardElement) {
            // 获取卡片的位置和尺寸信息
            const cardRect = cardElement.getBoundingClientRect();
            currentCardRect = cardRect;

            // 获取网站数据
            const siteData = {
                title: cardElement.dataset.title,
                url: cardElement.dataset.url,
                description: cardElement.dataset.description,
                clicks: cardElement.dataset.clicks,
                clickUrl: cardElement.dataset.clickUrl,
                iconImg: cardElement.querySelector('.link-icon-img'),
                iconFont: cardElement.querySelector('.link-icon')
            };

            currentSiteData = siteData;

            // 获取弹窗元素
            const modal = document.getElementById('siteModal');
            const modalContent = modal.querySelector('.modal-content');
            const modalTitle = modal.querySelector('.modal-title');
            const modalUrl = modal.querySelector('.modal-url');
            const modalDescription = modal.querySelector('.modal-description');
            const modalClicks = modal.querySelector('.modal-clicks');
            const modalIconImg = modal.querySelector('.modal-icon-img');
            const modalIconFont = modal.querySelector('.modal-icon');

            // 填充弹窗内容
            modalTitle.textContent = siteData.title;
            modalUrl.textContent = siteData.url;
            modalDescription.textContent = siteData.description || '暂无详细介绍';
            modalClicks.textContent = siteData.clicks;

            // 复制图标状态到弹窗
            if (siteData.iconImg && siteData.iconImg.style.display !== 'none' && siteData.iconImg.src) {
                modalIconImg.src = siteData.iconImg.src;
                modalIconImg.style.display = 'inline-block';
                modalIconFont.style.display = 'none';
            } else {
                modalIconImg.style.display = 'none';
                modalIconFont.style.display = 'inline-block';
                if (siteData.iconFont) {
                    modalIconFont.className = siteData.iconFont.className.replace('link-icon', 'modal-icon');
                }
            }

            // 先显示弹窗（透明度为0）
            modal.style.display = 'flex';
            document.body.style.overflow = 'hidden'; // 防止背景滚动

            // 获取遮罩层元素
            const modalOverlay = modal.querySelector('.modal-overlay');

            // 设置遮罩层初始状态
            modalOverlay.style.opacity = '0';

            // 设置弹窗内容初始状态：从卡片位置开始
            modalContent.style.transform = `translate(${cardRect.left + cardRect.width / 2 - window.innerWidth / 2}px, ${cardRect.top + cardRect.height / 2 - window.innerHeight / 2}px) scale(0.1)`;
            modalContent.style.opacity = '0';

            // 强制重排，确保初始样式生效
            modalContent.offsetHeight;

            // 使用 requestAnimationFrame 确保动画流畅
            requestAnimationFrame(() => {
                // 遮罩层淡入
                modalOverlay.style.opacity = '1';
                // 弹窗内容动画到最终位置
                modalContent.style.transform = 'translate(0, 0) scale(1)';
                modalContent.style.opacity = '1';
            });

            // 阻止事件冒泡
            if (event) {
                event.stopPropagation();
            }
        }

        /**
         * 关闭网站介绍弹窗
         */
        function closeSiteModal() {
            const modal = document.getElementById('siteModal');
            const modalContent = modal.querySelector('.modal-content');
            const modalOverlay = modal.querySelector('.modal-overlay');

            // 如果有卡片位置信息，动画回到卡片位置
            if (currentCardRect) {
                const cardRect = currentCardRect;

                // 遮罩层淡出
                modalOverlay.style.opacity = '0';

                // 弹窗内容动画回到卡片位置
                modalContent.style.transform = `translate(${cardRect.left + cardRect.width / 2 - window.innerWidth / 2}px, ${cardRect.top + cardRect.height / 2 - window.innerHeight / 2}px) scale(0.1)`;
                modalContent.style.opacity = '0';

                // 等待动画完成后再隐藏弹窗
                setTimeout(() => {
                    modal.style.display = 'none';
                    document.body.style.overflow = ''; // 恢复背景滚动

                    // 重置样式，为下次打开做准备
                    modalContent.style.transform = '';
                    modalContent.style.opacity = '';
                    modalOverlay.style.opacity = '';
                }, 400); // 与CSS transition时间一致
            } else {
                // 没有卡片位置信息，直接关闭
                modal.style.display = 'none';
                document.body.style.overflow = ''; // 恢复背景滚动
            }

            currentSiteData = null;
            currentCardRect = null;
        }

        /**
         * 访问网站
         */
        function visitSite() {
            if (currentSiteData && currentSiteData.clickUrl) {
                window.open(currentSiteData.clickUrl, '_blank');
                closeSiteModal();
            }
        }

        // 点击弹窗外部区域关闭弹窗
        document.addEventListener('click', function(event) {
            const modal = document.getElementById('siteModal');
            if (event.target === modal || event.target.classList.contains('modal-overlay')) {
                closeSiteModal();
            }
        });

        // ESC键关闭弹窗
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closeSiteModal();
            }
        });

        /**
         * 网站图标获取器 - 使用多种成熟方案获取网站favicon
         * 支持多种备用方案和智能缓存机制
         */
        class FaviconLoader {
            constructor() {
                this.cache = new Map(); // 缓存已获取的图标
                this.loadingQueue = []; // 加载队列
                this.maxConcurrent = 2; // 最大并发请求数（降低并发，避免阻塞）
                this.currentLoading = 0; // 当前加载数量
            }

            /**
             * 获取网站图标的多种方案
             * @param {string} url - 网站URL
             * @returns {Array} 图标URL数组
             */
            getFaviconUrls(url) {
                try {
                    const urlObj = new URL(url);
                    const domain = urlObj.hostname;
                    const origin = urlObj.origin;

                    return [
                        `https://api.qqsuu.cn/api/dm-get?url=${domain}`,
                        `https://api.mxin.moe/api/v1/favicon?url=${domain}`,
                        ''
                    ];
                } catch (error) {
                    console.warn('URL解析失败:', url, error);
                    return [];
                }
            }

            /**
             * 尝试加载单个图标URL（异步，不阻塞主线程）
             * @param {string} iconUrl - 图标URL
             * @param {number} timeout - 超时时间(毫秒)
             * @returns {Promise} 加载结果
             */
            loadSingleIcon(iconUrl, timeout = 3000) {
                return new Promise((resolve, reject) => {
                    // 使用 requestIdleCallback 确保在空闲时执行
                    const loadFunc = () => {
                        const img = new Image();
                        const timer = setTimeout(() => {
                            img.onload = img.onerror = null;
                            reject(new Error('加载超时'));
                        }, timeout);

                        img.onload = () => {
                            clearTimeout(timer);
                            // 检查图片是否有效(避免1x1像素的占位图)
                            if (img.width > 1 && img.height > 1) {
                                resolve(iconUrl);
                            } else {
                                reject(new Error('无效图标'));
                            }
                        };

                        img.onerror = () => {
                            clearTimeout(timer);
                            reject(new Error('加载失败'));
                        };

                        // 异步加载图片
                        img.src = iconUrl;
                    };

                    // 优先使用 requestIdleCallback，降级到 setTimeout
                    if (window.requestIdleCallback) {
                        requestIdleCallback(loadFunc, {
                            timeout: 1000
                        });
                    } else {
                        setTimeout(loadFunc, 0);
                    }
                });
            }

            /**
             * 异步加载网站图标
             * @param {string} url - 网站URL
             * @returns {Promise} 图标URL
             */
            async loadFavicon(url) {
                // 检查缓存
                if (this.cache.has(url)) {
                    return this.cache.get(url);
                }

                const iconUrls = this.getFaviconUrls(url);

                // 依次尝试各种方案
                for (const iconUrl of iconUrls) {
                    try {
                        const result = await this.loadSingleIcon(iconUrl);
                        // 缓存成功的结果
                        this.cache.set(url, result);
                        return result;
                    } catch (error) {
                        console.debug(`图标加载失败: ${iconUrl}`, error.message);
                        continue;
                    }
                }

                // 所有方案都失败，返回null
                this.cache.set(url, null);
                return null;
            }

            /**
             * 处理加载队列
             */
            async processQueue() {
                while (this.loadingQueue.length > 0 && this.currentLoading < this.maxConcurrent) {
                    const task = this.loadingQueue.shift();
                    this.currentLoading++;

                    try {
                        await task();
                    } catch (error) {
                        console.warn('队列任务执行失败:', error);
                    } finally {
                        this.currentLoading--;
                        // 继续处理队列
                        setTimeout(() => this.processQueue(), 100);
                    }
                }
            }

            /**
             * 为链接卡片加载图标
             * @param {HTMLElement} linkCard - 链接卡片元素
             */
            loadCardIcon(linkCard) {
                console.log("日志：", linkCard)
                const task = async () => {
                    const url = linkCard.dataset.url;
                    const autoIcon = linkCard.dataset.autoIcon;
                    const iconImg = linkCard.querySelector('.link-icon-img');
                    const iconFont = linkCard.querySelector('.link-icon');

                    if (!url || !iconImg || !iconFont) return;

                    // 只有当data-auto-icon为"1"时才自动获取网站图标
                    if (autoIcon !== '1') {
                        console.debug('链接已有自定义图标，跳过自动获取:', url);
                        return;
                    }

                    try {
                        const iconUrl = await this.loadFavicon(url);

                        if (iconUrl) {
                            // 成功获取图标，显示图片并隐藏字体图标
                            iconImg.src = iconUrl;
                            iconImg.style.display = 'inline-block';
                            iconFont.style.display = 'none';

                            // 添加加载动画效果
                            iconImg.style.opacity = '0';
                            iconImg.style.transition = 'opacity 0.3s ease';
                            setTimeout(() => {
                                iconImg.style.opacity = '1';
                            }, 50);
                        } else {
                            // 无法获取图标，保持使用字体图标
                            console.debug('无法获取网站图标，使用默认字体图标:', url);
                        }
                    } catch (error) {
                        console.warn('图标加载过程出错:', url, error);
                    }
                };

                // 添加到加载队列
                this.loadingQueue.push(task);
                this.processQueue();
            }
        }

        // 创建全局图标加载器实例
        const faviconLoader = new FaviconLoader();

        /**
         * 页面完全加载后初始化图标加载（异步，不阻塞主线程）
         */
        function initIconLoading() {
            // 使用 requestIdleCallback 确保在空闲时才加载图标
            const loadIcons = () => {
                console.log('页面空闲，开始异步加载网站图标...');

                // 获取所有链接卡片
                const linkCards = document.querySelectorAll('.link-card[data-url]');

                // 为每个链接卡片加载图标，使用更大的随机延迟避免阻塞
                linkCards.forEach((linkCard, index) => {
                    // 延迟2-5秒，分散请求，完全不影响主线程
                    const delay = 2000 + Math.random() * 3000 + index * 200;
                    setTimeout(() => {
                        faviconLoader.loadCardIcon(linkCard);
                    }, delay);
                });

                console.log(`将在2-5秒内陆续加载 ${linkCards.length} 个网站图标`);
            };

            // 优先使用 requestIdleCallback，确保不阻塞
            if (window.requestIdleCallback) {
                requestIdleCallback(loadIcons, {
                    timeout: 3000
                });
            } else {
                // 降级方案：页面加载完成2秒后再开始
                setTimeout(loadIcons, 2000);
            }
        }

        // 等待页面完全加载（包括图片等资源）
        if (document.readyState === 'complete') {
            initIconLoading();
        } else {
            window.addEventListener('load', initIconLoading);
        }

        /**
         * 手动刷新所有图标(可用于调试)
         * 只刷新需要自动获取图标的链接
         */
        function refreshAllIcons() {
            faviconLoader.cache.clear();
            const linkCards = document.querySelectorAll('.link-card[data-url][data-auto-icon="1"]');
            linkCards.forEach(card => {
                const iconImg = card.querySelector('.link-icon-img');
                const iconFont = card.querySelector('.link-icon');
                if (iconImg && iconFont) {
                    iconImg.style.display = 'none';
                    iconFont.style.display = 'inline-block';
                }
                faviconLoader.loadCardIcon(card);
            });
            console.log(`刷新了 ${linkCards.length} 个需要自动获取图标的链接`);
        }

        // ============ 访问跟踪功能 - 仅记录访问，不跟踪停留时间 ============

        // ============ 建站时间动态计时 ============
        (function() {
            // 从配置中获取建站时间
            const siteStartTime = new Date('<?php echo $conf["site_start_time"] ?? "2024-01-01 00:00:00"; ?>');
            const runtimeElement = document.getElementById('site-runtime');
            
            if (!runtimeElement) return;

            /**
             * 更新运行时间显示
             */
            function updateRuntime() {
                const now = new Date();
                const diff = now - siteStartTime;
                
                // 计算天、时、分、秒
                const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((diff % (1000 * 60)) / 1000);
                
                // 格式化显示
                runtimeElement.textContent = `${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`;
            }
            
            // 立即执行一次
            updateRuntime();
            
            // 每秒更新一次
            setInterval(updateRuntime, 1000);
        })();

        // ============ 磨砂玻璃通知弹窗功能 ============
        const notificationQueue = []; // 通知队列
        const notificationGap = 16;   // 通知之间的间距（px）

        /**
         * 显示磨砂玻璃通知弹窗（支持多个通知叠加）
         * @param {Object} options - 配置选项
         * @param {string} options.content - 通知内容
         * @param {Object} options.btn - 按钮配置
         * @param {string} options.btn.name - 按钮文字
         * @param {string|Function} options.btn.url - 跳转链接或回调函数（使用action）
         * @param {Function} options.btn.action - 按钮点击回调函数
         * @param {number} options.time - 倒计时时间（秒），默认10秒
         * @param {string} options.position - 弹窗位置：'bottom-right'(右下), 'bottom-left'(左下), 'top-right'(右上), 'top-left'(左上)，默认'bottom-right'
         */
        function showGlassNotification(options) {
            const {
                content = '这是一条通知',
                btn = null,
                time = 10,
                position = 'bottom-right'
            } = options;

            // 验证 position 参数
            const validPositions = ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
            const finalPosition = validPositions.includes(position) ? position : 'bottom-right';

            // 创建通知元素
            const notification = document.createElement('div');
            notification.className = 'glass-notification position-' + finalPosition;

            // 生成唯一ID
            const notificationId = 'notification-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
            notification.setAttribute('data-notification-id', notificationId);

            // 进度条
            const progress = document.createElement('div');
            progress.className = 'glass-notification-progress';
            notification.appendChild(progress);

            // 内容容器
            const contentDiv = document.createElement('div');
            contentDiv.className = 'glass-notification-content';

            // 文字内容
            const text = document.createElement('div');
            text.className = 'glass-notification-text';
            text.textContent = content;
            contentDiv.appendChild(text);

            // 按钮（如果有）
            if (btn) {
                const btnWrapper = document.createElement('div');
                btnWrapper.className = 'glass-notification-btn-wrapper';

                const button = document.createElement('button');
                button.className = 'glass-notification-btn';
                button.textContent = btn.name || '确定';

                // 处理按钮点击事件
                button.onclick = () => {
                    if (btn.action && typeof btn.action === 'function') {
                        // 如果提供了回调函数，执行回调
                        btn.action();
                    } else if (btn.url) {
                        // 如果提供了URL，跳转
                        window.location.href = btn.url;
                    }
                    // 关闭通知
                    closeGlassNotification(notification);
                };

                btnWrapper.appendChild(button);
                contentDiv.appendChild(btnWrapper);
            }

            notification.appendChild(contentDiv);

            // 关闭按钮
            const closeBtn = document.createElement('button');
            closeBtn.className = 'glass-notification-close';
            closeBtn.innerHTML = '×';
            closeBtn.onclick = () => {
                closeGlassNotification(notification);
            };
            notification.appendChild(closeBtn);

            // 添加到页面
            document.body.appendChild(notification);

            // 添加到队列
            notificationQueue.push({
                id: notificationId,
                element: notification,
                position: finalPosition
            });

            // 重新计算所有通知的位置
            updateNotificationPositions();

            // 触发显示动画
            setTimeout(() => {
                notification.classList.add('show');
                // 添加 show 类后，重新计算位置（移除滑入偏移）
                updateNotificationPositions();
            }, 100);

            // 启动进度条动画
            const duration = time * 1000; // 转换为毫秒
            progress.style.transition = `transform ${duration}ms linear`;

            setTimeout(() => {
                progress.style.transform = 'scaleX(0)';
            }, 100);

            // 倒计时结束后自动关闭
            setTimeout(() => {
                closeGlassNotification(notification);
            }, duration + 100);
        }

        /**
         * 更新所有通知的位置（叠加显示）
         */
        function updateNotificationPositions() {
            // 按位置分组
            const groups = {
                'bottom-right': [],
                'bottom-left': [],
                'top-right': [],
                'top-left': []
            };

            // 分组通知
            notificationQueue.forEach(item => {
                if (groups[item.position]) {
                    groups[item.position].push(item);
                }
            });

            // 为每个位置的通知计算偏移
            Object.keys(groups).forEach(position => {
                const notifications = groups[position];
                let offset = 0;

                notifications.forEach((item, index) => {
                    const element = item.element;
                    if (!element) return;

                    // 检查是否已显示（用于判断是否需要保留滑入动画）
                    const isShown = element.classList.contains('show');

                    // 根据位置设置偏移方向
                    let transform = '';
                    if (position.startsWith('bottom-')) {
                        // 底部位置：向上叠加
                        transform = `translateY(-${offset}px)`;
                    } else {
                        // 顶部位置：向下叠加
                        transform = `translateY(${offset}px)`;
                    }

                    // 如果通知还未显示，保留初始的滑入位置
                    if (!isShown) {
                        // 根据位置添加初始偏移
                        if (position.endsWith('-right')) {
                            transform = `translateX(450px) ${transform}`;
                        } else if (position.endsWith('-left')) {
                            transform = `translateX(-450px) ${transform}`;
                        }
                    }

                    element.style.transform = transform;

                    // 累加偏移量（通知高度 + 间距）
                    const height = element.offsetHeight || 0;
                    offset += height + notificationGap;
                });
            });
        }

        /**
         * 关闭磨砂玻璃通知弹窗
         * @param {HTMLElement} notification - 通知元素
         */
        function closeGlassNotification(notification) {
            if (!notification) return;

            // 获取通知ID
            const notificationId = notification.getAttribute('data-notification-id');

            notification.classList.remove('show');
            notification.classList.add('hide');

            // 从队列中移除
            const index = notificationQueue.findIndex(item => item.id === notificationId);
            if (index > -1) {
                notificationQueue.splice(index, 1);
            }

            // 等待动画结束后移除元素
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.parentNode.removeChild(notification);
                }
                // 重新计算剩余通知的位置
                updateNotificationPositions();
            }, 400);
        }

        // ============ 页面加载完成后显示欢迎通知 ============
        window.addEventListener('load', function() {
            // 获取当前时间段
            const hour = new Date().getHours();
            let timePeriod = '';
            let greeting = '';
            
            if (hour >= 5 && hour < 12) {
                timePeriod = 'morning';
                greeting = '早上好！☀️ 新的一天开始了，祝您工作顺利！';
            } else if (hour >= 12 && hour < 18) {
                timePeriod = 'afternoon';
                greeting = '下午好！🌇 继续努力，加油！💪';
            } else {
                timePeriod = 'evening';
                greeting = '晚上好！🌙 辛苦了一天，好好休息吧～';
            }
            
            // 检查 sessionStorage 中当前时间段是否已显示过通知
            const lastShownPeriod = sessionStorage.getItem('lastWelcomeNotificationPeriod');
            
            // 如果当前时间段已显示过，则不再显示
            if (lastShownPeriod === timePeriod) {
                console.log(`当前时间段（${timePeriod}）已显示过欢迎通知，跳过`);
                return;
            }
            
            // 延迟1秒后显示欢迎通知
            setTimeout(() => {
                showGlassNotification({
                    content: greeting,
                    time: 8,
                    position: 'top-right'
                });
                
                // 记录当前时间段已显示通知
                sessionStorage.setItem('lastWelcomeNotificationPeriod', timePeriod);
                console.log(`欢迎通知已显示（时间段：${timePeriod}），本时间段内不再重复显示`);
            }, 1000);
        });
    </script>
</body>

</html>